<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>品牌管理</title>
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="/plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="/css/style.css">
	<script src="/plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="/plugins/bootstrap/js/bootstrap.min.js"></script>

    
</head>
<body class="hold-transition skin-red sidebar-mini">
  <!-- .box-body -->
                    <div class="box-header with-border">
                        <h3 class="box-title">品牌管理</h3>
                    </div>

                    <div class="box-body">

                        <!-- 数据表格 -->
                        <div class="table-box">

                            <!--工具栏-->
                            <div class="pull-left">
                                <div class="form-group form-inline">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-default" title="新建" data-toggle="modal" data-target="#addModal" ><i class="fa fa-file-o"></i> 新建</button>
                                        <button type="button" class="btn btn-default" title="删除" onclick="del()"><i class="fa fa-trash-o"></i> 删除</button>
                                        <button type="button" class="btn btn-default" title="刷新" onclick="window.location.reload();"><i class="fa fa-refresh"></i> 刷新</button>
                                    </div>
                                </div>
                            </div>
                            <div class="box-tools pull-right">
                                <div class="has-feedback">
							                                         
                                </div>
                            </div>
                            <!--工具栏/-->

			                  <!--数据列表-->
			                  <table id="dataList" class="table table-bordered table-striped table-hover dataTable" >
			                      <thead>
			                          <tr>
			                              <th class="" style="padding-right:0px">
			                                  <input id="selall" type="checkbox" class="icheckbox_square-blue">
			                              </th> 
										  <th class="sorting_asc">品牌ID</th>
									      <th class="sorting">品牌名称</th>									      
									      <th class="sorting">品牌首字母</th>									     				
					                      <th class="text-center">操作</th>
			                          </tr>
			                      </thead>

			                      <tbody id="brand" >
<!--								  <div th:insert="page.html"></div>-->

			                      </tbody>

			                  </table>
			                  <!--数据列表/-->                        
							  
							 
                        </div>
                        <!-- 数据表格 /-->
						<div id="pageInfo" style="background:#FFF;padding-left:15px;">
						</div>

                     </div>
                    <!-- /.box-body -->
         
<!-- 编辑窗口 -->
<form id="addfrom">
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" >
	<div class="modal-content">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
			<h3 id="myModalLabel">品牌编辑</h3>
		</div>
		<div class="modal-body">		
			<table class="table table-bordered table-striped"  width="800px">
		      	<tr>
		      		<td>品牌名称</td>
		      		<td><input  class="form-control" placeholder="品牌名称" name="name">  </td>
		      	</tr>		      	
		      	<tr>
		      		<td>首字母</td>
		      		<td><input  class="form-control" placeholder="首字母" name="firstChar">  </td>
		      	</tr>		      	
			 </table>				
		</div>
		<div class="modal-footer">						
			<button class="btn btn-success" data-dismiss="modal" aria-hidden="true" onclick="add()">保存</button>
			<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
		</div>
	  </div>
	</div>
</div>
</form>
  <!-- 修改窗口 -->
	  <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		  <form id="updatefrom">
		  </form>
	  </div>

</body>

</html>
	<script>
		$(function(){
			listBrand ()
		})
		//分页
		function listBrand (pageNum){

			if (pageNum <= 1 || pageNum ==null){
				pageNum = 1
			}
			$.ajax({
				url : "/brand/brandList",
				type :"post",
				dataType : "json",
				data:{pageNum:pageNum},
				async:false,
				success : function(data) {
					var brands = data.rows;
					var pageNumUp = data.pageNum-1;
					var pageNumdown = data.pageNum+1;
					var  html = '';
					var html1 = '';
					$(brands).each(function(i,e) {
						html += '	<tr>'
						html += '	<td><input name="box" value="'+e.id+'" type="checkbox" ></td>'
						html += '	<td>'	+ e.id+     '</td>'
						html += '	<td>'	+ e.name+   '</td>'
						html += '	<td>'	+ e.firstChar+'</td>'
						html += '	<td className="text-center" align="center">'
						html += '	<button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#updateModal" onclick="toupdate('+e.id+')" >修改</button> '
						html += '	</td>'
						html += '	</tr>'
					})
					html1 += '<div>共'+data.total+'条数据&nbsp;当前:'+data.pageNum+'/'+data.pages+'页&nbsp;'
					html1 += '<a target="_self" href="javascript:void(0)" onclick="listBrand(1)" class="pagelink_a">首页</a>&nbsp;'
					html1 += '<a target="_self" href="javascript:void(0)" onclick="listBrand('+pageNumUp+')" class="pagelink_a">上一页</a>&nbsp;'
					html1 += '<a target="_self" href="javascript:void(0)" onclick="listBrand('+pageNumdown+')" class="pagelink_a">下一页</a>&nbsp;'
					html1 += '<a target="_self" href="javascript:void(0)" onclick="listBrand('+data.pages+')" class="pagelink_a">尾页</a>&nbsp;</div>'
					$("#brand").html(html)
					$("#pageInfo").html(html1)
				},
				error : function(data) {
					alert("错误!!!")
				}
			})
		}



		//增加
		function add() {
			$.ajax({
				url :"/brand/add",
				type:"post",
				data :$("#addfrom").serialize(),
				async:  true,
				dataType: "json",
				success:function (r){
					if (r == 1){
						alert("偶买噶!成功了")
					}
				},
				error : function (r){
					alert("可恶!!!!");
				}
			});
		}

		//回显
		function toupdate(id){
			$.ajax({
				url :"/brand/toupdate/"+id,
				type:"post",
				data :{},
				async:  true,
				dataType: "json",
				success:function (r){
					var to = '';
					to += ' <div class="modal-dialog" >' +
							'<div class="modal-content">' +
							'<div class="modal-header">' +
							'<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>' +
							'<h3 id="myModalLabel">品牌修改</h3>' +
							'</div>' +
							'<div class="modal-body">' +
							'<table class="table table-bordered table-striped"  width="800px">' +
							'<input type="hidden" name="id" id="id" value="'+r.id+'">'+
							'<tr>' +
							'<td>品牌名称</td>' +
							'<td><input  class="form-control" placeholder="品牌名称" id="name" name="name" value="'+r.name+' "> </td>' +
							'</tr>' +
							'<tr>' +
							'<td>首字母</td>' +
							'<td><input  class="form-control" placeholder="首字母" id="firstChar" name="firstChar" value="'+r.firstChar+'">  </td>' +
							'</tr>' +
							'</table>' +
							'</div>' +
							'<div class="modal-footer">' +
							'<button class="btn btn-success" data-dismiss="modal" aria-hidden="true" onclick="update()">修改</button>' +
							'<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>' +
							'</div>\n' +
							'</div>\n' +
							'</div>'
					$("#updatefrom").html(to);
				},
				error : function (r){
					alert("可恶!!!!");
				}
			})

		}


		//修改
		function update(){
			$.ajax({
				url : "/brand/update",
				type : "POST",
				data :{id:$("#id").val(),name:$("#name").val(),firstChar:$("#firstChar").val()},
				async : false,
				dataType : "json",
				success : function(r) {
					if (r == 1){
						alert("偶买噶!修改成功了")
					}
				},
				erro :function(r) {
					alert("可恶!!!!");
				}
			})
		}

		//删除
		function del(){
			if(confirm("确定删除吗？")) {
				var boxs = document.getElementsByName("box");
				var ids = "";
				for (var i = 0; i < boxs.length; i++) {
					if (boxs[i].checked) {
						ids += boxs[i].value + ","
					}
				}
				ids = ids.substring(0, ids.length - 1);
				$.ajax({
					url: "/brand/delBrands?ids=" + ids,
					data: {},
					dataType: "json",
					type: "post",
					async: false,
					success: function (result) {
						if (result.code == 1) {
							alert(result.message)
						}
						window.location.reload();
					},
					error: function (r) {
						alert(r.message);
					}
				})
			}
		}
	</script>
